<template>
  <div>
    <div class="main-bg-head">
      <img src="../../assets/bg-head.jpg" class="main-bg-image"/>
    </div>
    <div class="content">
      <div class="content-bg">
        <div v-for="(item, index) in clubs">
          <router-link :to="{path: `/clubdetail/${item.id}`}">
            <div class="content-wrap">
              <div class="img-wrap">
                <div :style="{backgroundImage: `url(${item.cover})`}" class="img-bg"></div>
              </div>
              <div class="content-info-wrap">
                <p class="info-name overflow-line">{{item.name}}</p>
                <p class="info-gray overflow-line">地址：{{item.location}}</p>
                <p class="info-gray">距离：{{item.distance}}km</p>
              </div>
              <router-link :to="{name: 'fillinfo', params:{clubId:`${item.id}`,clubName:`${item.name}`}}">
                <div class="receive-btn-sm">领取</div>
              </router-link>
            </div>
          </router-link>
        </div>
      </div>
      <div class="content-bottom"></div>
      <baidu-map id="allmap" class="bm-view" ak='vllt18FUjkwK7nM50Z7T33Oe' @ready="handler" :autoLocation="true"></baidu-map>
    </div>
    <div class="loading-pop" v-show="isLoad">
      <div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>   
  </div>
</template>

<script>
import {BaiduMap} from 'vue-baidu-map'
export default {
  name: 'index',
  data () {
    return {
      clubs: [],
      isLoad: false
    }
  },
  components: {
    BaiduMap
  },
  methods: {
    handler ({ BMap, map }) {
      try {
        // this.isLoad = true
        this.$http
          .get(`${process.env.API}/common/clubs?lat=0&lon=0&brand_id=50`, {
            headers: { Accept: 'application/vnd.sci.v2+json' }
          })
          .then(response => {
            response = response.body
            this.clubs = response.data
            this.isLoad = false
          })
          .catch(console.log)
        var geolocation = new BMap.Geolocation()
        if (geolocation.getCurrentPosition) {
          // this.isLoad = true
          let that = this
          geolocation.getCurrentPosition(
            function (r) {
              if (this.getStatus() === 0) {
                that.$http
                  .get(
                    `${process.env.API}/common/clubs?lat=${r.point.lat}&lon=${r.point.lng}&brand_id=50`,
                    { headers: { Accept: 'application/vnd.sci.v2+json' } }
                  )
                  .then(response => {
                    response = response.body
                    that.clubs = response.data
                    that.isLoad = false
                  })
                  .catch(console.log)
              } else {
              }
            },
            { enableHighAccuracy: true }
          )
        } else {
        }
      } catch (error) {
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
$mainColor = #f09495;

.main-bg-head {
  position: relative;
  font-size: 0;
}

.main-bg-image {
  width: 100%;
  height: auto;
}

.content {
  position: relative;

  .content-bg {
    background: url('../../assets/bg-middle.jpg') repeat-y;
    background-size: 100%;
    padding-top: 15px;
    padding-bottom: 40px;

    .content-wrap {
      position: relative;
      width: 84%;
      height: 120px;
      margin: 0 auto;
      margin-bottom: 10px;
      border: 1px solid #909090;
      box-sizing: content-box;
      border-radius: 5px;
      display: flex;
      flex-flow: row;

      .img-wrap {
        position: relative;
        width: 120px;
        height: 120px;
        border-radius: 5px 0 0 5px;
        overflow: hidden;

        .img-bg{
          width 100%
          height 100%
          background-size cover
        }
      }

      .content-info-wrap {
        flex: 1;
        padding: 10px;
        display:flex;
        flex-direction:column;
        justify-content space-between;

        .info-name {
          width: 100%;
          color: #333333;
          font-size: 0.875rem;
          line-height: 1.5;
        }

        .info-gray {
          width: 100%;
          color: #909090;
          font-size: 0.75rem;
          line-height: 1.5;
        }

      }

      .receive-btn-sm {
        position: absolute;
        width: 75px;
        height: h = 25px;
        line-height: h;
        text-align: center;
        right: 0;
        bottom: 0;
        background: $mainColor;
        color: #fff;
        font-size: 0.875rem;
        border-radius: 10px 0 5px 0;
      }
    }
  }

  .content-bottom {
    background: url('../../assets/bg-foot.jpg') no-repeat;
    background-size: 100%;
    margin-bottom: 0;
    height: 120px;
    margin-top: -120px;
  }
}
</style>
